<!DOCTYPE html>
<html>
<head xmlns:th="http://www.thymeleaf.org"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/material-icons.css">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/vue.js"></script>
    <title>搜索</title>
    <style>
        #logo > img{
            width: 50%;
            height: 80%;
        }

        #navbarSupportedContent  > #title-hover > li > a {
            text-decoration: none;
            transition: all 0.5s;
        }
        #navbarSupportedContent > #title-hover > li > a:hover{
            padding-left: 20px;
        }
        #navbarSupportedContent  span{
            font-size: 25px;
            padding-left: 20px;
        }
        body {
            background-color: #fafafa;
        }

        #searchInfo {
            margin-bottom: 2rem;
        }

        #nav-tabContent > .tab-content {
            margin-top: 10px;
        }
    </style>
</head>
<body >

<nav class="navbar navbar-expand-lg navbar-light border-danger" id="nav-title">
    <div id="logo" class="col-md-2" style="text-align:center;">
        <img src="/static/img/logo.png">
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul id="title-hover" class="navbar-nav mr-auto">
            <li class="nav-item active">
                <span class="nav-link">大象云音乐</span>
            </li>
            <li class="nav-item ">
                <a class="nav-link" href="/"> <span>首页</span></a>
            </li>
            <li class="nav-item ">
                <a class="nav-link" href="/user/profile"> <span>我的音乐</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><span>推荐歌单</span></a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0" action="/search">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" name="key" aria-label="Search">
        </form>
        <ul class="navbar-nav" id="log-btns">
            <li class="nav-item" th:if="${session.user == null}">
                <a class="btn btn-primary" data-toggle="modal" data-target="#loginModel">登录</a>
            </li>
            <li class="nav-item" th:if="${session.user == null}">
                <a class="btn btn-link" href="/sign/page">注册</a>
            </li>
            <li class="nav-item" th:if="${session.user != null}">
                <a class="btn btn-link" href="/logout">注销</a>
            </li>
            <li class="nav-item" th:if="${session.user != null && session.user.permission.equals('admin')}">
                <a class="btn btn-link" href="/admin/page">后台</a>
            </li>
        </ul>
    </div>
</nav>
<div class="container" id="mainContent">
    <div class="row">
        <div class="input-group mb-3">
            <input type="text" id="checkCode" class="form-control" placeholder="输入关键字" v-model="key" aria-label=""
                   aria-describedby="basic-addon2">
            <div class="input-group-append">
                <button class="btn btn-outline-secondary" @click="search" type="button">搜索</button>
            </div>
        </div>
        <h5 id="searchInfo" v-if="!searching">搜索"{{key}}"，找到以下符合条件的歌曲</h5>
    </div>
    <div class="row">
        <div class="col-md-12">
            <nav>
                <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
                    <a class="nav-item nav-link active" id="nav-name-tab" data-toggle="tab" href="#nav-name" role="tab"
                       aria-controls="nav-name" aria-selected="true">歌名</a>
                    <a class="nav-item nav-link" id="nav-lyric-tab" data-toggle="tab" href="#nav-lyric" role="tab"
                       aria-controls="nav-lyric" aria-selected="false">歌词</a>
                    <a class="nav-item nav-link" id="nav-singer-tab" data-toggle="tab" href="#nav-singer" role="tab"
                       aria-controls="nav-singer" aria-selected="false">歌手</a>
                </div>
            </nav>
            <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane fade show active" id="nav-name" role="tabpanel" aria-labelledby="nav-name-tab">
                    <table class="table table-striped" id="songNamePanel">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>歌名</th>
                            <th>歌手</th>
                            <th>风格</th>
                            <th>语言</th>
                            <th>需要等级</th>
                        </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(song,index) in songN">
                                <th>{{index+1}}</th>
                                <td><a :href="'/play?id='+song.pk">{{song.name}}</a></td>
                                <td>{{song.singer}}</td>
                                <td>{{song.style}}</td>
                                <td>{{song.language}}</td>
                                <td>{{song.rank}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="tab-pane fade" id="nav-lyric" role="tabpanel" aria-labelledby="nav-lyric-tab">
                    <table class="table table-striped" id="songlyricPanel">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>歌名</th>
                            <th>歌手</th>
                            <th>风格</th>
                            <th>语言</th>
                            <th>需要等级</th>
                        </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(song,index) in songL">
                                <th>{{index+1}}</th>
                                <td>{{song.name}}</td>
                                <td>{{song.singer}}</td>
                                <td>{{song.style}}</td>
                                <td>{{song.language}}</td>
                                <td>{{song.rank}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="tab-pane fade" id="nav-singer" role="tabpanel" aria-labelledby="nav-singer-tab">
                    <table class="table table-striped" id="singerPanel">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>歌名</th>
                            <th>歌手</th>
                            <th>风格</th>
                            <th>语言</th>
                            <th>需要等级</th>
                        </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(song,index) in songS">
                                <th>{{index+1}}</th>
                                <td>{{song.name}}</td>
                                <td>{{song.singer}}</td>
                                <td>{{song.style}}</td>
                                <td>{{song.language}}</td>
                                <td>{{song.rank}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/static/js/content/search.js"></script>
</body>
</html>